<template>
  <el-dialog
    title="网关通道集合交易限制"
    append-to-body
    :visible.sync="dialogVisible"
    width="85%"
    :close-on-click-modal="false"
  >
    <el-form
      ref="main-form"
      :model="form"
      :rules="rules"
      label-width="350px"
      label-position="right"
      :inline="true"
    >
      <el-form-item label="网关通道集合" size="mini" prop="collectionName">
        <el-input v-model="form.collectionName" disabled></el-input>
      </el-form-item>

      <h4>调度通道</h4>
      <el-form-item label="调度级别" size="mini">
        <el-input type="number" v-model="form.channelSort" disabled></el-input>
      </el-form-item>

      <el-form-item label="通道名称" size="mini">
        <el-input v-model="form.channelName" disabled></el-input>
      </el-form-item>
      <el-row>
        <el-form-item label="单笔金额最小限制（单位元）" size="mini">
          <el-input
            type="number"
            v-model.number="form.amountMin"
            @keyup.enter.native="submit"
            clearable
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="单笔金额最大限制（单位元）" size="mini">
          <el-input
            type="number"
            v-model.number="form.amountLimit"
            @keyup.enter.native="submit"
            clearable
          ></el-input>
        </el-form-item>
      </el-row>

      <el-form-item label="日交易笔数限制（单位笔）" size="mini">
        <el-input
          type="number"
          v-model="form.dayCountLimit"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
        <!-- <div>总：{{ channel.totalDayCountLimit }} / 已分配：{{ channel.sumDayCountLimit }}</div> -->
        <!-- <div>总：{{ form.totalDayCountLimit }}</div> -->
      </el-form-item>

      <el-form-item label="月交易笔数限制（单位笔）" size="mini">
        <el-input
          type="number"
          v-model.number="form.monthCountLimit"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
        <!-- <div>总：{{ channel.totalMonthCountLimit }} / 已分配：{{ channel.sumMonthCountLimit }}</div> -->
        <!-- <div>总：{{ form.totalMonthCountLimit }}</div> -->
      </el-form-item>

      <el-form-item label="日交易总金额限制（单位元）" size="mini">
        <el-input
          type="number"
          v-model.number="form.dayAmountLimit"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
        <!-- <div>总：{{ channel.totalDayAmountLimit }} / 已分配：{{ channel.sumDayAmountLimit }}</div> -->
        <!-- <div>总：{{ form.totalDayAmountLimit }}</div> -->
      </el-form-item>

      <el-form-item label="月交易总金额限制（单位元）" size="mini">
        <el-input
          type="number"
          v-model.number="form.monthAmountLimit"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
        <!-- <div>总：{{ channel.totalMonthAmountLimit }} / 已分配：{{ channel.sumMonthAmountLimit }}</div> -->
        <!-- <div>总：{{ form.totalMonthAmountLimit }}</div> -->
      </el-form-item>

      <el-form-item label="日交易总金额限制阈值（百分比）" size="mini">
        <el-input
          type="number"
          v-model="form.dayAmountThreshold"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="月交易总金额限制阈值（百分比）" size="mini">
        <el-input
          type="number"
          v-model="form.monthAmountThreshold"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close" size="small">取 消</el-button>
      <el-button type="primary" @click="submit" size="small" :loading="loading"
        >提 交</el-button
      >
    </div>
  </el-dialog>
</template>

<script>

import ApiMain from '@/api/mch.ter';

export default {
  mixins: [
  ],
  props: [
  ],
  data() {
    return {

      dialogVisible: false,
      popDeleteVisible: false,
      loading: false,
      isSettingLoad: false,

      form: {
        channelNo: '',
        terName: '',
        terNo: '',
        conn: [],
        sort: 1,
        amountMin: 0,
        collectionName:'',
      },

      rules: {
      },
  row:{},
      mchNo: null,
      channelNo: null,
      data: null,

    }
  },

  methods: {

    show(mchNo = null, channelNo = null, row = null) {
      console.log('内部ID', row)
       this.form.collectionName = row.collectionName
      this.form.channelNo = row.channelNo
      this.form.channelName = row.channelName
      this.form.terName = row.terName
      this.form.terNo = row.terNo
      this.row=row
      this.form.channelSort = row.channelSort
      this.form.mchNo = row.mchNo
      // this.mchNo = 'test-mch-catt';
      // this.channelNo = 'channel-1';
      this.mchNo = mchNo;
      this.channelNo = channelNo;
      if (this.mchNo) {
        this.fetchData();
      }
      else {
        this.reset();
      }

      this.dialogVisible = true;
    },

    close() {
      this.dialogVisible = false;
      this.reset();
      this.$emit('dialog-close');
    },

    reset() {
      this.form = {
        channelNo: '',
        conn: []
      };
    },

    fetchData() {

      ApiMain.channelLimit({ mchNo: this.mchNo, channelNo: this.channelNo })
        .then(re => {
          this.data = re;
          console.log('我是data', this.data)
        })
        .catch(() => {
          this.data = null;
        })
        .finally(() => {
          this.renderData();
        });
    },

    renderData() {
      // this.form = this.data;
        // this.form.channelSort = this.row.channelSort
        if(!this.data) return
        this.data.channelId = this.data.channelId,
        this.data.amountMin = this.data.amountMin / 100,
        this.data.amountLimit = this.data.amountLimit / 100,
        this.data.dayCountLimit = this.data.dayCountLimit,
        this.data.monthCountLimit = this.data.monthCountLimit,
        this.data.dayAmountLimit = this.data.dayAmountLimit / 100,
        this.data.monthAmountLimit = this.data.monthAmountLimit / 100,
        this.data.dayAmountThreshold = this.data.dayAmountThreshold,
        this.data.monthAmountThreshold = this.data.monthAmountThreshold,

        this.data.sumDayCountLimit = this.data.sumDayCountLimit,
        this.data.sumMonthCountLimit = this.data.sumMonthCountLimit,
        this.data.sumDayAmountLimit = this.data.sumDayAmountLimit / 100,
        this.data.sumMonthAmountLimit = this.data.sumMonthAmountLimit / 100,
        this.data.sumDayAmountThreshold = this.data.sumDayAmountThreshold,
        this.data.sumMonthAmountThreshold = this.data.sumMonthAmountThreshold,

        this.data.totalDayCountLimit = this.data.totalDayCountLimit,
        this.data.totalMonthCountLimit = this.data.totalMonthCountLimit,
        this.data.totalDayAmountLimit = this.data.totalDayAmountLimit / 100,
        this.data.totalMonthAmountLimit = this.data.totalMonthAmountLimit / 100,
        this.data.totalDayAmountThreshold = this.data.totalDayAmountThreshold,
        this.data.totalMonthAmountThreshold = this.data.totalMonthAmountThreshold


        this.form = {
          ...this.form,
          ...this.data}
    },

    verifyForm() {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit() {
      if (!this.verifyForm()) return false;
      // for (var i in this.form.conn) {
      // if (this.form.amountLimit <= 0) {
      //   this.$message.info('调度通道每单限额应大于0')
      //   return 
      // }
      // if (this.form.dayCountLimit <= 0) {
      //   this.$message.info('调度通道每日交易总单数应大于0')
      //   return 
      // }
      // if (this.form.monthCountLimit <= 0) {
      //   this.$message.info('调度通道每月交易总单数应大于0')
      //   return 
      // }
      // if (this.form.dayAmountLimit <= 0) {
      //   this.$message.info('调度通道每日交易总金额应大于0')
      //   return 
      // }
      // if (this.form.monthAmountLimit <= 0) {
      //   this.$message.info('调度通道每月交易总金额应大于0')
      //   return 
      // }
      if (this.form.dayAmountThreshold <= 0 || this.form.dayAmountThreshold > 100) {
        this.$message.info('调度通道每日交易总金额阈值应在0-100区间')
        return
      }
      if (this.form.monthAmountThreshold <= 0 || this.form.monthAmountThreshold > 100) {
        this.$message.info('调度通道每月交易总金额阈值应在0-100区间')
        return
      }
      // }

      this.loading = true;

      try {
        await this.submitSet();
      } finally {
        this.loading = false;
      }
    },

    async submitSet() {

      this.form.mchNo = this.mchNo;
      this.form.channelNo = this.channelNo;
      await ApiMain.setChannelLimit(this.handleForm());
      this.$message({ message: '修改成功', type: 'success' });
      this.close();

    },

    // 处理参数
    handleForm() {
      // 直接达到深拷贝的效果
      let form = JSON.parse(JSON.stringify(this.form))
      form.amountLimit = form.amountLimit == '' ? 0 : form.amountLimit * 100
      form.amountMin = form.amountMin == '' ? 0 : form.amountMin * 100
      form.dayCountLimit = form.dayCountLimit == '' ? 0 : form.dayCountLimit
      form.monthCountLimit = form.monthCountLimit == '' ? 0 : form.monthCountLimit
      form.dayAmountLimit = form.dayAmountLimit == '' ? 0 : form.dayAmountLimit * 100
      form.monthAmountLimit = form.monthAmountLimit == '' ? 0 : form.monthAmountLimit * 100
      form.dayAmountThreshold = form.dayAmountThreshold == '' ? 0 : form.dayAmountThreshold
      form.monthAmountThreshold = form.monthAmountThreshold == '' ? 0 : form.monthAmountThreshold
      return form
    },

  }
}
</script>

<style>
</style>
